<route lang="json5" type="page">
  {
    "name": "user",
    "layout": "default",
    "style": {
      "disableScroll": true,
      "navigationStyle": "default",
      "enablePullDownRefresh": false,
      "navigationBarBackgroundColor": "#F8F8F8",
      "navigationBarTitleText": "用户中心"
    }
  }
</route>

<script setup lang="ts">
import { useUserCenter } from './index'

const {
  dateRange,
  userForm,
  userInfo,
  sexOptions,
  showSexPicker,
  showBirthdayPicker,
  handleAvatarUpload,
  tempBirthday,
  isEditingNickname,
  isEditingPhone,
  isEditingEmail,
  formatBirthday,
  getSexText,
  handleBirthdayPickerOpen,
  handleEdit,
  handleFieldAction,
  handleBirthdayConfirm,
  handleSexSelect,
  handleChangePassword,
  handleUpgradeMember,
  handleRedeemMember,
  handleDeleteAccount,
} = useUserCenter()
</script>

<template>
  <view class="main-page">
    <!-- 头像 -->
    <view class="avatar-container">
      <view class="avatar-wrapper" @click="handleAvatarUpload">
        <image
          :src="userInfo?.avatar || 'https://img.zwfcyy.top/echo-app/logo/er-main.png'"
          mode="aspectFill"
          class="avatar-image"
        />
        <view class="avatar-edit">
          <wd-icon name="camera" size="20" color="#fff" />
        </view>
      </view>
    </view>

    <!-- 用户信息 -->
    <view class="user-info-container">
      <wd-card custom-class="user-card">
        <template #title>
          <view class="flex">
            <view class="pr-2">
              <wd-icon name="user" size="18" color="#4f46e5" />
            </view>
            <view><wd-text text="基本信息" /></view>
          </view>
        </template>

        <wd-cell-group custom-class="group">
          <!-- 昵称 - 可编辑 -->
          <wd-cell title="昵称" is-link center title-width="80px" size="large" @click="handleEdit('nickname')">
            <view class="cell-content">
              <text v-if="!isEditingNickname" class="cell-text">
                {{ userForm.realname || '未设置' }}
              </text>
              <input
                v-else
                v-model="userForm.realname"
                class="cell-input"
                type="nickname"
                placeholder="请输入昵称"
                focus
                @blur="handleFieldAction('nickname')"
                @confirm="handleFieldAction('nickname')"
              >
            </view>
          </wd-cell>

          <!-- 性别 - 只读，点击弹出选择 -->
          <wd-cell title="性别" is-link size="large" @click="showSexPicker = true">
            <view class="cell-content">
              <text class="cell-text">
                {{ getSexText(userForm.sex) }}
              </text>
            </view>
          </wd-cell>

          <!-- 手机 - 可编辑 -->
          <wd-cell title="手机" is-link center title-width="80px" size="large" @click="handleEdit('phone')">
            <view class="cell-content">
              <text v-if="!isEditingPhone" class="cell-text">
                {{ userForm.phone || '未设置' }}
              </text>
              <input
                v-else
                v-model="userForm.phone"
                class="cell-input"
                type="number"
                placeholder="请输入手机号"
                focus
                @blur="handleFieldAction('phone')"
                @confirm="handleFieldAction('phone')"
              >
            </view>
          </wd-cell>

          <!-- 邮箱 - 可编辑 -->
          <wd-cell title="邮箱" is-link center title-width="80px" size="large" @click="handleEdit('email')">
            <view class="cell-content">
              <text v-if="!isEditingEmail" class="cell-text">
                {{ userForm.email || '未设置' }}
              </text>
              <input
                v-else
                v-model="userForm.email"
                class="cell-input"
                type="text"
                placeholder="请输入邮箱"
                focus
                @blur="handleFieldAction('email')"
                @confirm="handleFieldAction('email')"
              >
            </view>
          </wd-cell>

          <!-- 生日 - 只读，点击弹出选择 -->
          <wd-cell title="生日" is-link size="large" @click="handleBirthdayPickerOpen(); showBirthdayPicker = true">
            <view class="cell-content">
              <text class="cell-text">
                {{ formatBirthday(userForm.birthday) }}
              </text>
            </view>
          </wd-cell>
        </wd-cell-group>
      </wd-card>
    </view>

    <!-- 账户管理 -->
    <view class="account-container">
      <wd-card custom-class="account-card">
        <template #title>
          <view class="flex">
            <view class="pr-2">
              <wd-icon name="setting" size="18" color="#4f46e5" />
            </view>
            <view><wd-text text="账户管理" /></view>
          </view>
        </template>

        <wd-cell-group custom-class="group">
          <!-- 修改密码 -->
          <wd-cell title="修改密码" is-link size="large" @click="handleChangePassword">
            <template #icon>
              <view class="pr-2">
                <wd-icon name="tools" size="16" color="#3498db" />
              </view>
            </template>
          </wd-cell>

          <!-- 升级会员 -->
          <wd-cell title="升级会员" is-link size="large" @click="handleUpgradeMember">
            <template #icon>
              <view class="pr-2">
                <wd-icon name="heart" size="16" color="#e74c3c" />
              </view>
            </template>
          </wd-cell>

          <!-- 兑换会员 -->
          <wd-cell title="兑换会员" is-link size="large" @click="handleRedeemMember">
            <template #icon>
              <view class="pr-2">
                <wd-icon name="goods" size="16" color="#f39c12" />
              </view>
            </template>
          </wd-cell>

          <!-- 注销账户 -->
          <wd-cell title="注销账户" is-link size="large" custom-class="danger-cell" @click="handleDeleteAccount">
            <template #icon>
              <view class="pr-2">
                <wd-icon name="delete1" size="16" color="#e74c3c" />
              </view>
            </template>
          </wd-cell>
        </wd-cell-group>
      </wd-card>
    </view>

    <!-- 性别动作面板 -->
    <wd-action-sheet v-model="showSexPicker" :actions="sexOptions" @select="handleSexSelect" />

    <!-- 生日选择弹窗 -->
    <wd-popup v-model="showBirthdayPicker" position="bottom" custom-style="height: 400rpx; border-radius: 16rpx 16rpx 0 0;" :safe-area-inset-bottom="true">
      <view class="picker-header">
        <text class="picker-cancel" @click="showBirthdayPicker = false">
          取消
        </text>
        <text class="picker-title">
          选择生日
        </text>
        <text class="picker-confirm" @click="handleBirthdayConfirm">
          确定
        </text>
      </view>
      <wd-datetime-picker-view
        v-model="tempBirthday"
        type="date"
        :min-date="dateRange.minDate"
        :max-date="dateRange.maxDate"
      />
    </wd-popup>

    <!-- 消息弹框 -->
    <wd-message-box />
  </view>
</template>

<style scoped lang='scss'>
@import './index.scss';
</style>
